<script lang="ts" setup>
import { useRouter } from 'vue-router';
import { ref, watch } from "vue";
import { Toast } from 'vant';
import 'vant/es/toast/style';
import { userLocalStoriesStore,homeStoriesStore } from "../../store";
import { storeToRefs } from 'pinia'

const userStore = userLocalStoriesStore();
const { isLogin } = storeToRefs(userStore);
const { refreshUserStore, searchUserList, updateMyUserNowData, updateIsLogin } = userStore;

const store = homeStoriesStore();
const { updateIsDiscoverShow } = store;

const router = useRouter();
let radioBtn = ref<boolean>(false);
let isVisable = ref<boolean>(false);
let hasId = ref<boolean>(false);

let phoneVal = ref<string>('');
let passwordVal = ref<string>('');
let visibleUrl = ref<string>('');
let passwordType = ref<string>('password');

watch(() => isLogin.value, () => {
    if (!isLogin.value) {
        radioBtn.value = false;
        isVisable.value = false;
    }
})

function goToHome() {
    console.log(passwordVal.value, phoneVal.value);
    if (passwordVal.value && phoneVal.value && !hasId.value) {

        if (radioBtn.value) {
            updateMyUserNowData({
                phone: phoneVal.value,
                password: passwordVal.value,
                userName: `用户 ${phoneVal.value}`
            })

            refreshUserStore({
                phone: String(phoneVal.value),
                password: String(passwordVal.value)
            })
            updateIsLogin(true);
            updateIsDiscoverShow(false);
            router.push({
                name: 'home'
            })

            Toast.loading({
                message: '正在登录...',
                forbidClick: true,
            });
        }
        else {
            Toast({
                message: 'ONE：登录/注册前\n请先阅读并同意相关协议',
            });
        }
    }
    else {
        if (hasId.value) {
            Toast('用户已存在，请直接登录');
        }
        else {
            Toast('值不能为空');
        }
    }

}

function changeRadio() {
    radioBtn.value = !radioBtn.value;
}

function goToBackFunc() {
    router.go(-1);
}

function changeVisible() {
    if (isVisable.value) {
        isVisable.value = false;
        passwordType.value = 'password'
        visibleUrl.value = require('@/assets/login/phone_password_invisible.png');
    }
    else {
        passwordType.value = 'text';
        isVisable.value = true;
        visibleUrl.value = require('@/assets/login/phone_password_visible.png');
    }
}

function changePhoneVal() {
    if (searchUserList(phoneVal.value)) {
        hasId.value = true;
        Toast('用户已存在，请直接登录');
    }
    else {
        hasId.value = false;
    }
}

</script>

<template>
    <div class="h-screen">
        <div class="relative h-72">
            <img class="w-14 h-14 absolute top-3 left-3" src="@/assets/login/phone_back_white.png" alt="img"
                @click="goToBackFunc">
            <img class="h-72 w-screen" src="@/assets/user/login_head.png" alt="img">
            <img class="absolute bottom-32 w-48 ml-56" src="@/assets/login/ali_login_one_logo.png" alt="img">
        </div>
        <div class="p-16">
            <div>密码登录</div>
            <form class="mt-16">
                <div class="flex items-center border-b py-2">
                    <img class="w-12 mr-5" src="@/assets/login/phone_icon.png" alt="img">
                    <input class="h-16 w-4/5" type="text" placeholder="手机号码" v-model="phoneVal"
                        @change="changePhoneVal">
                </div>
                <div class="flex items-center border-b py-2">
                    <img class="w-12  mr-5" src="@/assets/login/phone_password_icon.png" alt="img">
                    <input class="h-16 w-4/5" :type="passwordType" placeholder="请输入密码" v-model="passwordVal">
                    <img class="h-14" :src="visibleUrl || require('@/assets/login/phone_password_invisible.png')"
                        alt="img" @click=changeVisible>
                </div>
            </form>
            <div class="mt-24">
                <form class="flex justify-center items-center text-gray-400">
                    <input type="radio" class="mr-3" @click="changeRadio" :checked="radioBtn">
                    <div>我已阅读并同意</div>
                    <div class="text-black">《用户服务协议》</div>
                    <div>和</div>
                    <div class="text-black">《隐私政策》</div>
                </form>
                <van-button class="my-5" color="#aaa" round size="large" type="default" @click="goToHome">注册
                </van-button>

            </div>
        </div>
    </div>
</template>